<template>
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <router-link class="navbar-brand" :to="{ name: 'home' }">
                <span class="brand-text">北京邮电大学</span>
            </router-link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
                aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'home' }">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'chargingpilegeneral' }">
                            <i class="fas fa-charging-station"></i>
                            <span>充电桩状态</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'waitingcarsinfo' }">
                            <i class="fas fa-car"></i>
                            <span>等候车辆</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'reportdisplay' }">
                            <i class="fas fa-chart-bar"></i>
                            <span>报表展示</span>
                        </router-link>
                    </li>
                </ul>
                <div class="navbar-text">
                    <span class="admin-badge">
                        <i class="fas fa-user-shield"></i>
                        管理员端
                    </span>
                </div>
            </div>
        </div>
    </nav>
</template>

<script>
export default {
    name: "NavBar",
}
</script>

<style scoped>
.navbar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    padding: 1rem 0;
    box-shadow: 0 4px 6px rgba(43, 51, 145, 0.1);
}

.navbar-brand {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.brand-text {
    color: var(--text-light);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 8px;
    margin: 0 0.25rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link:hover {
    color: var(--text-light) !important;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.nav-link i {
    font-size: 1.1rem;
}

.nav-link span {
    font-weight: 500;
}

.router-link-active {
    color: var(--text-light) !important;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.admin-badge i {
    color: var(--accent-color);
}

.navbar-toggler {
    border: none;
    padding: 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--primary-dark);
        padding: 1rem;
        border-radius: 12px;
        margin-top: 1rem;
    }
    
    .nav-link {
        margin: 0.25rem 0;
    }
}
</style>